<style scoped>
.resultsQuery {
  margin-right: 15px;
  padding: 0 15px;
  background-color: white;
  height: 87.5vh;
  position: relative;
}
.rq-top {
  padding: 15px 0;
  border-bottom: 2px solid #f4f4f4;
}
.rq-top div {
  display: flex;
}
.rq-top p:first-child {
  margin: 3px 6px 0 0;
  display: inline-block;
  /* width: 70px; */
  white-space: nowrap;
  /* text-align: end; */
}
.rq-top p:not(:first-child) {
  margin: 3px 6px 0 12px;
  display: inline-block;
  white-space: nowrap;
}
.wd {
  width: 160px;
}
.rq-btn {
  padding: 15px 15px;
  display: flex;
  justify-content: space-between;
}
.rq-tab {
  display: flex;
}
.tab-left {
  width: 50%;
  padding-right: 5px;
  border-right: 2px solid #f4f4f4;
}
.tab-right {
  width: 50%;
  padding-left: 5px;
}
</style>

<style>
.resultsQuery .rq-top .el-input__inner,
.resultsQuery .rq-btn .el-input__inner {
  height: 30px;
}
.resultsQuery .rq-top .el-date-editor .el-range__icon {
  line-height: 23px;
}
.resultsQuery .rq-top .el-date-editor .el-range-separator {
  width: 8%;
  line-height: 23px;
}
.resultsQuery .rq-btn .el-checkbox.is-bordered {
  padding: 5px 20px 9px 10px;
  height: 30px;
}
</style>

<template>
  <div class="resultsQuery">
    <div class="rq-top">
      <div>
        <p>主推</p>
        <el-select class="wd update-el-select" v-model="main">
          <el-option
            v-for="item in List"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <span style="float: left">{{ item.value }}</span>
            <span style="float: right">{{ item.value1 }}</span>
          </el-option>
        </el-select>

        <p>次推</p>
        <el-select class="wd update-el-select" v-model="minor">
          <el-option
            v-for="item in List1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <span style="float: left">{{ item.value }}</span>
            <span style="float: right">{{ item.value1 }}</span>
          </el-option>
        </el-select>

        <p>调货日期</p>
        <el-date-picker
          class="update-el-datetimerange"
          unlink-panels
          v-model="timeDate"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>

        <p>VIP</p>
        <el-input
          disabled
          style="width: 60px; margin-right: 10px"
          v-model="vip"
        ></el-input>
        <el-select
          v-model="vipPhone"
          @change="Change1"
          style="width: 120px"
          class="update-el-select"
        >
          <el-option
            v-for="item in vipList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <span style="float: left">{{ item.value1 }}</span>
            <span style="float: right">{{ item.value }}</span>
          </el-option>
        </el-select>
      </div>
    </div>

    <div class="rq-btn">
      <div>
        <el-button @click="query" type="primary" icon="el-icon-search"
          >查询</el-button
        >
      </div>
      <div>
        <el-select style="width: 100px" v-model="checked">
          <el-option
            v-for="item in NoList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>

    <div class="rq-tab">
      <div class="tab-left">
        <el-table
          id="tip1"
          show-summary
          :data="aList"
          style="width: 100%"
          height="73vh"
          highlight-current-row
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '26px' }"
        >
          <template v-for="i in bList">
            <el-table-column
              :prop="i.prop"
              :label="i.label"
              :width="i.width"
              :key="i.prop + Math.random()"
            >
            </el-table-column>
          </template>
        </el-table>
      </div>

      <div class="tab-right">
        <el-table
          id="tip1"
          :data="cList"
          style="width: 100%"
          height="73vh"
          highlight-current-row
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '26px' }"
        >
          <template v-for="i in eList">
            <el-table-column
              :prop="i.prop"
              :label="i.label"
              :width="i.width"
              :key="i.prop + Math.random()"
            >
            </el-table-column>
          </template>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getVip, getAchievement, getClerk1 } from '../../../network/shop'
export default {
  name: 'results_query',
  created() {
    this.bList = this.bList1
    this.eList = this.eList1
    // vip
    getVip().then((res) => {
      // console.log(res.data)
      res.data.data.forEach((e) => {
        this.vipList.push({ value: e.name, label: e.name, value1: e.phone })
      })
    })
    //主推 次推
    getClerk1({ directSaleNo: this.directSaleNo }).then((res) => {
      res.data.data.forEach((e) => {
        this.List.push({
          value: e.personnelNo,
          label: e.personnelNo,
          value1: e.personnelName
        })
        this.List1.push({
          value: e.personnelNo,
          label: e.personnelNo,
          value1: e.personnelName
        })
      })
    })
  },
  data() {
    return {
      aList: [],
      cList: [],
      timeDate: '',
      checked: '明细',
      main: '',
      minor: '',
      vip: '',
      vipPhone: '',
      vipList: [],
      List: [],
      List1: [],
      bList: [],
      NoList: [
        { label: '汇总', value: '汇总' },
        { label: '明细', value: '明细' }
      ],
      bList1: [
        // {prop:'',label:'VIP'},
        // {prop:'',label:'单号'},
        // {prop:'',label:'日期'},
        { prop: 'number', label: '数量' },
        { prop: 'money', label: '销售金额' },
        { prop: 'main', label: '主推' },
        { prop: 'minor', label: '次推' }
      ],

      eList: [],
      eList1: [
        { prop: 'vip', label: 'VIP' },
        { prop: 'vipSellSequence', label: '单号', width: '120' },
        { prop: 'sellTime', label: '日期', width: '160' },
        { prop: 'integralMoney', label: '积分额' },
        { prop: 'exchange', label: '已兑换' },
        { prop: 'money', label: '销售金额' }
      ],
      eList2: [
        { prop: 'vip', label: 'VIP' },
        { prop: 'integralMoney', label: '积分额' },
        { prop: 'exchange', label: '已兑换' },
        { prop: 'money', label: '销售金额' }
      ],

      directSaleNo: document.cookie.match(RegExp('jxStoreNo' + '=([^;]+)'))[1]
    }
  },
  methods: {
    Change1() {
      for (let a of this.vipList) {
        if (this.vipPhone == a.value) {
          this.vip = a.value1
        }
      }
    },
    query() {
      let obj = {
        main: this.main,
        minor: this.minor,
        vip: this.vip,
        startTime:
          this.timeDate == ''
            ? ''
            : this.timeDate == null
            ? ''
            : this.timeDate[0] + 'T00:00:00',
        endTime:
          this.timeDate == ''
            ? ''
            : this.timeDate == null
            ? ''
            : this.timeDate[1] + 'T23:59:59'
      }
      console.log(obj)
      getAchievement(obj).then((res) => {
        console.log(res.data)
        if (res.data.code == 200) {
          if (this.checked == '汇总') {
            this.aList = res.data.data.totalByMain
            this.cList = res.data.data.totalByVip
            console.log(1)
          } else {
            this.aList = res.data.data.info
            this.cList = res.data.data.info
            console.log(2)
          }
        }
      })
    }
  },
  watch: {
    checked(a, b) {
      if (this.checked == '汇总') {
        this.eList = this.eList2
        this.query()
      } else {
        this.eList = this.eList1
        this.query()
      }
    }
  }
}
</script>
